<script lang="ts" setup>
import pageVue from "/src/lib/lay/page.vue";
import control from "/src/lib/action/control.vue";
import { $ } from "../../../../lib/request";
import { reactive,ref } from "vue";
import { modal  } from "vxe-table";
import { IDCardNumber, CarId, isNull, phone, Number } from '/src/lib/encrypt/editRules.ts'
const xTable = ref({} as any)
const isEdit = ref(false)
const date = "2021年11月15日";let money =ref(0);let guestName =ref("")
//表格配置项
const gridOptions = reactive({
  border: true,
  resizable: false,
  height: 330,
  rowId: "id",
  checkboxConfig: {
    reserve: true,
  },
  pagerConfig: {
    pageSize: 10,
  },
  editConfig: { trigger: "click", mode: "row", enabled: true },
  editRules: {
    "carCard":CarId,
    "idCard": IDCardNumber,
    "phone": phone,
    "productName": isNull,
    "driverName": isNull,
    "truck": Number,
  },
  columns: [
    {
      type: "checkbox",
      width: 50,
    },
    { field: "carCard", title: "车牌号", editRender: { name: "$input" } },
    {
      field: "productName",
      title: "物料名称",
      editRender: {
        name: "$select",
        options: [
          { value: "精品级配砂", label: "精品级配砂" },
          { value: "精品瓜子片", label: "精品瓜子片" },
          { value: "精品二分石", label: "精品二分石" },
          { value: "精品三分石", label: "精品三分石" },
          { value: "石粉", label: "石粉" },
          { value: "瓜子片", label: "瓜子片" },
          { value: "三分石", label: "三分石" },
          { value: "机制砂", label: "机制砂" },
          { value: "泥饼", label: "泥饼" },
          { value: "粉末", label: "粉末" },
        ],
      },
    },
    {
      field: "truck",
      title: "重量(吨)",
      showOverflow: true,
      editRender: { name: "$input" },
    },
    {
      field: "driverName",
      title: "司机姓名",
      showOverflow: true,
      editRender: { name: "$input" },
    },
     {
      field: "phone",
      title: "手机号",
      showOverflow: true,
      editRender: { name: "$input" },
    },
    {
      field: "idCard",
      title: "身份证号码",
      showOverflow: true,
      editRender: { name: "$input" },
    },
  ],
  proxyConfig: {
    seq: true, // 启用动态序号代理（分页之后索引自动计算为当前页的起始序号）
    props: {
      result: "result",
      total: "page.total",
    },
    ajax: {
      // 接收 Promise
      query: ({
        page: { currentPage, pageSize },
      }: {
        page: {
          currentPage: number;
          pageSize: number;
        };
      }) => {
        return new Promise((resolve) => {
          setTimeout(() => {
            const list = [{} ];
            resolve({
              page: {
                total: list.length,
              },
              result: list.slice(
                (currentPage - 1) * pageSize,
                currentPage * pageSize
              ),
            });
          }, 100);
        });
      },
    },
  },
});
// 初始化空对象
const initEmpty = (obj: object, init: number) => {
  Object.keys(obj).forEach((key) => {
    obj[key] !== init && !obj[key] && (obj[key] = init);
  });
  return obj;
};
//新增一行
 const insertEvent = async (row: any) => {
              const $table = xTable.value
              const record = {}
              const { row: newRow } = await $table.insertAt(record, row)
              await $table.setActiveCell(newRow, 'khmc')
            }
//确认派单 
const handlePaidan = (guestName:string) => {
    const $table = xTable.value;
    const selectRecords = $table.getCheckboxRecords();
    const addList=[] as any[]
    selectRecords.forEach(({id,...item}:any) => {
      addList.push(initEmpty({...item,name:guestName},0))
    });
if(addList.length>0){
console.log('订单信息',JSON.stringify(addList).replace(/^\[+|\]+$/g, ''));

  $.get("oa/saas/core/productcar/cqchpc.do", { params: {
    addCarList:JSON.stringify(addList).replace(/^\[+|\]+$/g, '')
  } }).then((respose) => {
  modal.message({ content: respose.data.message, status: "success" });
      $table.removeCheckboxRow()
       name2()
      name()
     
  });
}else{
       modal.message({ content:'修改失败，请勾选行', status: "error" });
    }
};

const itemData = ref({
    精品级配砂: 0,
    精品瓜子片: 0,
    精品二分石: 0,
    精品三分石: 0,
    石粉: 0,
    瓜子片: 0,
    三分石: 0,
    机制砂: 0,
    泥饼: 0,
    粉末: 0,
  } as any)
let itemData2 = ref({
    精品级配砂: 0,
    精品瓜子片: 0,
    精品二分石: 0,
    精品三分石: 0,
    石粉: 0,
    瓜子片: 0,
    三分石: 0,
    机制砂: 0,
    泥饼: 0,
    粉末: 0,
  } as any)
//用户余额
$.get("oa/saas/core/productcar/get.do", {params: {},}).then(
  (respose)=>{
   guestName.value= respose?.data.data.khmc
    money.value= respose?.data.data.yfk/10000
   name()
    name2();  

  });
 
      //客户明日进出装料
function name() {
$.get("oa/saas/core/productcar/khzl.do", {
    params: {name:guestName.value+''},
  }).then((respose)=>{
   var varr =respose.data.data
   const mockData = {
    精品级配砂: 0,
    精品瓜子片: 0,
    精品二分石: 0,
    精品三分石: 0,
    石粉: 0,
    瓜子片: 0,
    三分石: 0,
    机制砂: 0,
    泥饼: 0,
    粉末: 0,
  };

   varr.forEach((item: any, index: any) => {
     mockData[item.wlmc]=item.wlzl
   });
   console.log(guestName.value+'','明日装料',mockData);
    itemData.value = initEmpty({ ...mockData }, 0);
    // itemData2.value = itemData.value
  });
}

      //剩余料量
function name2() {
$.get("oa/saas/core/productcar/khyl.do", {
    params: {name:guestName.value+''},
  }).then((respose)=>{
   var varr =respose.data.data
   const mockData = {
    精品级配砂: 0,
    精品瓜子片: 0,
    精品二分石: 0,
    精品三分石: 0,
    石粉: 0,
    瓜子片: 0,
    三分石: 0,
    机制砂: 0,
    泥饼: 0,
    粉末: 0,
  };

   varr.forEach((item: any, index: any) => {
     mockData[item.wlmc]=item.wlzl
   });
   console.log(guestName.value+'','剩余料量',mockData);
    itemData2.value = initEmpty({ ...mockData }, 0);
    // itemData2.value = itemData.value
  });
}
</script>
<template lang="pug">
pageVue
  template(v-slot:top)
    .hjk
        .topp 请您添加明日入厂车辆
        .headerr {{guestName||'客户'}}，您好！
          .text
            |截止到{{ date }}，您的账户预付款余额为：{{ money }} 万元。（温馨提示：账户余额不足时，车辆将无法进厂）
        control(:itemData="itemData" :isEdit="isEdit")
        .mid 请您派车:
          vxe-grid(v-bind="gridOptions"    ref="xTable"  highlight-hover-row  style="margin-top: 20px;" )
        .bot
            vxe-button.bott( style="margin-right: 68px;"  @click="insertEvent(0)") 新增一行
            vxe-button.bott( style="margin-right: 68px;"  @click="xTable.removeCheckboxRow()") 删除
            vxe-button.bott( @click="handlePaidan(guestName)" ) 确认派车
  template(v-slot:bottom)
    .hjk
      control(:itemData="itemData2"  :isEdit="isEdit")
        template(v-slot:title)
          .title 剩余料量
</template>

<style lang="scss" scoped>
.hjk {
  display: grid;
  gap: 20px;
  padding: 48px;
}
.topp {
  font-size: 20px;
  font-weight: bold;
  line-height: 20px;
  color: #5d5d5d;
}
.headerr {
  width: 100%;
  margin: 20px auto;
  font-size: 18px;
  font-family: Source Han Sans CN;
  line-height: 36px;
  color: #000000;
  background: #f0faf2;
  border-radius: 10px;
  padding: 10px;
  .text {
    margin-left: 40px;
  }
}
.mid {
  font-size: 18px;
  color: #5d5d5d;
  font-weight: bold;
  
}
.bot {
  // display: flex;
  text-align: center;
  margin-bottom: -20px;
  .bott {
    text-align: center;
    text-decoration: none;
    display: inline-block;
    height: 34px;
    background: #f0faf2;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);
    border-radius: 10px;
    font-size: 18px;
    line-height: 34px;
    color: #5d5d5d;
    border: none;
    cursor: pointer;
  }

}
</style>
